<template>
  <div>
    <Header></Header>
    <!--main开始-->
    <div class="mainBox w1200 bc mt20 clearfix">
      <userSideMenu :flag="'collete'"></userSideMenu>
      <div class="mainRight fr w930">
        <!--收藏的游记-->
        <div class="br2 bg100 pb60">
          <!--title-->
          <h1 class="h60 bb90  c60 clearfix ">
            <a :class="(tagIndex===0)?'ml30 fl h60 f18 fm-yahei c60 lh60  hoverborder_grn_bottom curborder_grn_bottom':'ml30 fl h60 f18 fm-yahei c60 lh60  hoverborder_grn_bottom'" href="javascript:void(0);" @click="getMyCollectPlace">收藏的场地</a>
            <a :class="(tagIndex===1)?'fl h60 f18 fm-yahei  lh60  c60  ml80 hoverborder_grn_bottom curborder_grn_bottom':'fl h60 f18 fm-yahei  lh60  c60  ml80 hoverborder_grn_bottom'" href="javascript:void(0);" @click="getMyCollectActive">收藏的活动</a>
            <a :class="(tagIndex===2)?'fl h60 f18 fm-yahei  lh60 c60 ml80 hoverborder_grn_bottom curborder_grn_bottom':'fl h60 f18 fm-yahei  lh60 c60 ml80 hoverborder_grn_bottom'" href="javascript:void(0);" @click="getMyCollectTravel">收藏的游记</a>
          </h1>
          <!--list-->
          <ul class="w880 pl25 pr25  c60 f12 lh18 fm-yahei  pointer">
            <PlaceItem v-for="place in placeList" :place="place" v-if="type==='place'"></PlaceItem>
            <activityItem v-if="type==='active'" v-for="active in activeList" :active="active"></activityItem>
            <travelItem v-if="type==='travel'" v-for="travel in travelList" :travel="travel"></travelItem>
            <li class="tc c60 f12 lh60 mt20">
              <a class="c60 hoverfont_unl" href="javascript:void(0);" @click = "getMore" ref="infoListBox">点击查看更多></a>
            </li>
          </ul>
        </div><!--热门活动结束-->

      </div><!--mainRight结束-->
    </div>
    <Footer></Footer>
    <loading v-show="loadState"></loading>
  </div>
  <!--main结束-->
</template>

<script>
  import Header from "../../components/header";
  import Footer from "../../components/footer";
  import userSideMenu from "../../components/usersidemenu";
  import PlaceItem from "../../components/placeItem";
  import activityItem from "../../components/activityItem";
  import travelItem from "../../components/travelItem";
  import Utils from "../../assets/Util";
  import loading from "../../components/loading";
  export default {
    name: "userCollect",
    components: {
      Header,
      Footer,
      userSideMenu,
      PlaceItem,
      activityItem,
      travelItem,
      loading
    },
    data(){
      return {
        loadState:true,
        type:'place',
        tagIndex:0,
        placeList:[],
        activeList:[],
        travelList:[],
        getPlaceData:{
          "type": 4,
          "userID": localStorage.getItem("uId"),
          "token": localStorage.getItem("token"),
          "pageIndex": 0,
          "pageSize": 5
        },
        getActiveData:{
          "type": 4,
          "userID": localStorage.getItem("uId"),
          "token": localStorage.getItem('token'),
          "pageIndex": 0,
          "pageSize": 5,
          "variety": 1
        }
      }
    },
    mounted(){
      if (!Utils.isLogin){
        this.$router.push({path:'/'})
      }
      this.getPlaces()
    },
    methods:{
      // 请求场地列表
      getPlaces(){
        this.getPlaceData.userID = localStorage.getItem("uId");
        this.getPlaceData.token = localStorage.getItem("token");
        let props = {
          url:"/Place/GetList",
          data:this.getPlaceData,
          sCallBack:res => {
            this.loadState = false
            if(res.data.code === 1){
              if(res.data.data.length === 0){
                if (this.getPlaceData.pageIndex === 0){
                  this.$refs.infoListBox.innerText = "暂无数据";
                  return false;
                }
                this.$message.success("全部加载完毕");
                return false;
              }
              this.placeList = this.placeList.concat(res.data.data);
            }else if(res.data.code === 4){
              this.refreshToken(this.getPlaces);
            }else{
              this.$message.error("场地信息请求出错");
            }
          },
          eCallBack:err => {
            this.$message.error("场地信息请求失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 请求我收藏的活动
      getActivity(){
        this.getActiveData.userID = localStorage.getItem('uId');
        this.getActiveData.token = localStorage.getItem('token');
        let props = {
          url:"/Activity/GetList",
          data:this.getActiveData,
          sCallBack:res => {
            this.loadState = false;
            if(res.data.code === 1){
              if(res.data.data.length === 0){
                if (this.getActiveData.pageIndex === 0){
                  this.$refs.infoListBox.innerText = "暂无数据";
                  return false;
                }
                this.$message.success("全部加载完毕");
                return false;
              }else{
                this.$refs.infoListBox.innerText = "点击加载更多";
              }
              if (this.type === "active"){
                this.activeList = this.activeList.concat(res.data.data);
              }else{
                this.travelList = this.travelList.concat(res.data.data);
              }
            }else if(res.data.code === 4){
              this.refreshToken(this.getActivity);
            }else{
              this.$message.error("活动信息请求出错");
            }
          },
          eCallBack:err => {
            this.$message.error("活动请求失败");
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 请求我收藏的场地
      getMyCollectPlace(){
        this.tagIndex = 0;
        this.type = "place";
        this.placeList = [];
        this.loadState = true;

        this.getPlaceData.pageIndex = 0;
        this.getPlaces();
      },
      // 请求我收藏的活动
      getMyCollectActive(){
        this.tagIndex = 1;
        this.type = "active";
        this.loadState = true;
        this.activeList = [];
        this.getActiveData.pageIndex = 0;
        this.getActiveData.variety = 1;
        this.getActivity();
      },
      // 请求我收藏的游记
      getMyCollectTravel(){
        this.tagIndex = 2;
        this.type = "travel";
        this.loadState = true;
        this.travelList = [];
        this.getActiveData.pageIndex = 0;
        this.getActiveData.variety = 2;
        this.getActivity();
      },
      // 获取更多数据
      getMore(){
        if (this.type === "place"){
          this.getPlaceData.pageIndex += 1;
          this.loadState = true;
          this.getPlaces();
        }else{
          this.getActiveData.pageIndex += 1;
          this.loadState = true;
          this.getActivity();
        }
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      }
    }
  }
</script>

<style scoped>

</style>
